<template>
  <div class="trademark">
    <div class="trademarknav">
        <img style="margin-left:12px" @click="toindex" src="../../assets/images/fanhui.png" alt="">
        <div>选择品牌</div>
        <div style="margin-right:12px;width:18px;height:19px;"></div>
    </div>
    <div class="carList" style="margin-top:44px">
        <van-index-bar sticky :sticky-offset-top="44" :index-list="indexlist">
            <div v-for="(item,index) in CarList" :key="index">
                <van-index-anchor :index="item.letter" />
                <div class="list_item" v-for="(name,index1) in item.brand" :key="index1" @click="brandClick(name.brand_id,index,index1)">
                    <div class="f_a">
                        <img :src="name.brand_logo_url"/>
                        <span>{{name.brand_name}}</span>
                    </div>
                    <div class="span_m">共{{name.series_count}}款车</div>
                </div>
            </div>
        </van-index-bar>
        <van-popup v-model="show" bind:close="onClose" position="right" :style="{height:'100%',width:'82%'}">
            <div class="brand_list" style="margin-top:44px">
                <div class="brand_all">
                    <div v-if="manufacturer_name.length !=0">
                        <div class="brand_titall" v-for="(item,index) in manufacturer_name" :key="index">
                            <!-- <span class="brand_titall_span">{{item.manufacturer_name}}</span> -->
                            <div class="brand_imgA" @click="popupClcik(item.series_id,item.series_name)">
                                <img :src="item.series_img_url"/>
                                <div class="brand_imgA_box">{{item.series_name}}</div>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <div class="nodata">
                            <img src="../../assets/images/nodata.png"/>
                            <span>暂无数据</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>

  </div>
</template>

<script>
export default {
    data:() => ({
        CarList: '',
        indexlist: [],
        brand_id: '',
        show: false,
        manufacturer_name:'',
        is_sale:0,
        code:'',
    }),
    created(){
        // this.getbrand()
        this.getImageList
        // console.log(this.$route.params.code)
        this.code = this.$route.params.code
        this.CarList = this.$route.params.bardlist
        console.log(this.CarList)
        let indexlist=[]
        this.CarList.forEach(item=>{  
          indexlist.push(item.letter)
        })
        this.indexlist = indexlist
    },
    methods:{

        toindex(e) {
            console.log('返回')
            this.$router.push({ 
                name:'index',
                query: {
                    code: this.code
                }
            });
        },

        //选中品牌
        brandClick(brand_id,index,index1) {
            console.log(index1)
            this.show = true,
            this.brand_id = brand_id
            this.manufacturer_name =  this.CarList[index].brand[index1].series_list
            console.log(this.CarList[index].brand[index1].series_list)
            // this.getSelling(this.is_sale)
        },

        onClose() {
            this.show = false
        },

        // 点击去车型详情页面
        popupClcik(series_id,series_name){
            console.log(series_id,series_name)
            let data = {
                namespan: series_name,
                product_option_id:series_id
            }
            localStorage.setItem('vehicle',JSON.stringify(data))
            this.$router.push({ 
                name:'index',
                query: {
                    code: this.code
                }
            });
        },
    }
}
</script>

<style>
@import "index";
</style>